<template>
  <div>
    <checklist
      title="checklistpopover"
      :label-position="labelPosition"
      required
      :max="1"   
      :options="commonList"
      v-model="checklist001"
      @on-change="change"
    ></checklist>
    <div v-transfer-dom>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">Long content</p>
        <div class="img-box" style="height:100px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          {{ text }}
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { Checklist ,TransferDom,XDialog} from "vux";
export default {
  data() {
    return {
      labelPosition: "",
      checklist001: "",
      commonList: [
        "China111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111", 
        "Japan", "America"],
      showScrollBox:false,
      text:"",
    };
  },
  directives: {
    TransferDom
  },
  components: {
    Checklist,
    XDialog,
    TransferDom
  },
  methods: {
    change(val) {
      if (val && val.length >0) {
        this.showScrollBox = true;
        this.text = val[val.length - 1];
      }else{
        this.showScrollBox = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';

.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 100% !important;
    color:#fff;
    background-color: #000;
    overflow: hidden;
    word-break: break-all;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>